<template>
  <div>
    <Table
      :tableList="listArry"
      :tableType="listType"
      :Edit="true"
      @edit="edit"
      @del="del"
      :operation="'修改'"
      :operate="false"
      :total="total"
      @page="page"
      @limit="limit"
      :pagination="false"
    >
      <template #span> 22222 </template>
      <template #operate>111</template>
    </Table>
  </div>
</template>

<script>
import Table from "./components/table.vue";
export default {
  components: {
    Table,
  },
  data() {
    return {
      listArry: [],
      listType: [],
      total: 0,
      queryData: {
        page: 1,
        limit: 4,
      },
    };
  },
  methods: {
    async list() {
      this.listArry = [
        { id: 1, name: "ls", description: "牛逼的开发", create_date: "2022" },
        { id: 2, name: "ww", description: "牛逼的测试", create_date: "2020" },
        { id: 3, name: "ll", description: "牛逼的产品", create_date: "2021" },
        { id: 4, name: "lq", description: "牛逼的组长", create_date: "2019" },
      ];
      this.total = 5;
      this.listType = [
        { lable: "角色ID", prop: "id" },
        { lable: "角色名称", prop: "name" },
        { lable: "角色描述", prop: "description" },
        { lable: "创建时间", type: "span", prop: "create_date" },
      ];
    },
    edit(id) {
      console.log(id.id);
    },
    del(id) {
      console.log(id.id);
    },
    page(val) {
      console.log("page", val);
    },
    limit(val) {
      console.log("limit", val);
    },
  },
  created() {
    this.list();
  },
};
</script>
